<template>
	<view class="cates">
		<!-- 搜索 -->
		<souSuo></souSuo>
		<view class="cates_container">
			<!-- 左侧  currentId = left.cat_id-->
			<scroll-view class="scrollLeft" scroll-y="true" enable-flex>
				<!-- <view class="lefTitle" :class="{active:currentId === -1}" @click="currentId = -1">大家电</view> -->
				 
				<view class="lefTitle" :class="{active:tapIndex === index}"
				:data-index="index"
				@click="tapIndex = index"
				 v-for="(left,index) in leftList" 
				 :key="index">{{left.cat_name}}
				 </view>
			</scroll-view>
			<!-- 右侧 -->
			<scroll-view class="scrollRight" scroll-y="true" enable-flex >
				<view class="cartgoos" v-for="(c1,index) in chlidrenList" :key="c1.cat_id">
					
					<view class="goosTitle">
						<view class="titleBias">/</view>
						<view class="titleName">{{c1.cat_name}}</view>
						<view class="titleBias">/</view>
					</view>
					
					<view class="goosCenter">
						<view class="center" v-for="(c2,index) in c1.children" :key="c2.cat_id">
							<image class="centerImg" :src="c2.cat_icon" mode="widthFix"></image>
							<view class="centerText">{{c2.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import souSuo from '../index/compnents/butSousuo/souSuo.vue'
	import {mapGetters} from "vuex"
	export default {
		data(){
			return {
				tapIndex:-1,
				// chlidrenLi:[]
			}
		},
		mounted() {
			this.getcatDataList()
		},
		computed:{
			...mapGetters('cotegory',['leftList','chlidrenList']),
			// chlidr:{
			// 	get(){
			// 	return this.leftList[this.tapIndex].children = this.chlidrenList 
			// 	},
			// 	set(val){
			// 		// this.leftList[this.tapIndex]||[].children===val
			// 		// this.chlidrenList = this.leftList[tapIndex].children
			// 		this.leftList[tapIndex].children = val
			// 	}
			// }
		},
		methods:{
			getcatDataList(){
				this.$store.dispatch('cotegory/getcatDataList')
			},
			// liftRight(index){
			// let tapIndex = event.currentTarget.dataset.index
		 //  this.tapIndex =	index
			
			
			
			// console.log(this.chlidrenList = this.leftList[tapIndex].children  );
			// this.chlidrenList =  this.leftList[tapIndex].children
			// this.$set(this.chlidrenList)
		// }
		
	},
		components:{
			souSuo
		},
	}
</script>

<style lang="stylus">
page
		height 100%
	.cates
		height: 100%
		.cates_container
			height:calc(100vh - 90upx)
			display: flex
			.scrollLeft
				flex: 2
				.lefTitle
					flex-shrink: 0
					height: 80upx
					line-height: 80upx
					text-align: center
				&	.active
						color: red;
						border-left: 10upx solid red;
			.scrollRight
				flex: 5
				.cartgoos
					.goosTitle
						display: flex
						justify-content: center
						align-items: center
						height: 80upx
						line-height: 80upx
						text-align: center
					.titleName
						margin: 0 10upx 
						.titleBias
							width: 4upx
							color: #ccc;
							padding: 0 10rpx;
					.goosCenter
						display: flex
						flex-wrap: wrap
						.center
							text-align: center
							width: 33.333%
							.centerImg
								width: 88upx
								height: 90upx
								.centerText
									font-size: 26upx
</style>
